<template>
  <div class="app">
    <BaseSelect v-model="selectId"></BaseSelect>
  </div>
</template>

 <!-- v-model原理
  原理：v-model本质上是一个语法糖，例如应用在输入框上，就是value属性和input事件的合写
  作用：提供数据的双向绑定
  1.数据变，视图跟着变：value
  2.视图变，数据跟着变@input
  注意：$event用于在模板中，获取事件的形参 -->
  <!-- 表单类组件封装&v-model简化代码
  1.表单类组件 封装
  1）父传子：数据应该是父组件props传递过来的，v-model拆解绑定数据
  2）子传父：监听输入，子传父传值给父组件修改 -->
  <!-- 表单类组件封装&v-model简化代码
  2.父组件v-model简化代码，实现子组件和父组件数据双向绑定
  1）子组件中：props通过value接收，事件触发input
  2）父组件中：v-model给组件直接绑定数据 -->

<script>
import BaseSelect from './components/BaseSelect.vue'
export default {
  data() {
    return {
      selectId: '102',
    }
  },
  components: {
    BaseSelect,
  },
}
</script>

<style>
</style>